<template>
  <div class="movie-page">
    <movieAd />
    <div
      v-if="DetailInfos"
      class="movie-info"
      :style="'background-color:#' + bg"
    >
      <div class="crumbs-nav">
        <a href="/"></a>
        <router-link to="/"
          >泽枫影城&nbsp;&gt;&nbsp;<span>{{
            DetailInfos.lists.name
          }}</span></router-link
        >
      </div>
      <div class="movie-info-top">
        <div class="movie-cover" data-view-sended="1">
          <a href="javascript:void(0)"
            ><img
              class="img noneBg poster"
              :alt="DetailInfos.lists.name"
              :src="DetailInfos.lists.poster"
              width="100"
              height="138"
              e="1"
              c="1" /><img
              class="img noneBg poster-play"
              alt=""
              src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/poster-play.png"
          /></a>
        </div>
        <div class="movie-desc">
          <div class="movie-desc-top">
            <div class="movie-cn-name" style="width: 211px">
              <h1 style="display: inline-block; width: 206px">
                {{ DetailInfos.lists.name }}
              </h1>
            </div>
            <div class="movie-en-name">zf Movie</div>
            <div class="movie-other-info">
              <div class="movie-type">
                <span class="movie-cat">{{
                  DetailInfos.lists.category.replace(/\|/g, " / ")
                }}</span
                ><span class="movie-tag"
                  ><img
                    class="img noneBg"
                    alt=""
                    src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/movie-tag-2DIMAX.png"
                /></span>
              </div>
              <div class="actors" v-if="actorNameArr[0]">
                <a
                  ref="actors"
                  v-for="actor in actorNameArr"
                  :key="actor.name"
                  href="javascript:void(0)"
                  >{{ actor.name }}&nbsp;/&nbsp;</a
                >
              </div>
              <div class="actors" v-else>
                <a ref="actors" href="javascript:void(0)">{{ "暂无主演" }}</a>
              </div>
              <div class="movie-show-time">
                <span
                  >{{ (DetailInfos.lists.premiereAt * 1000) | setTimerFilter
                  }}{{ DetailInfos.lists.nation + "上映" }} /
                  {{ DetailInfos.lists.runtime + "分钟" }}</span
                >
              </div>
            </div>
          </div>
          <div class="btns">
            <button
              data-bid="b_rjonirtp"
              data-view-bid="b_movie_b_rjonirtp_mv"
              data-lab='{"movie_id":1444523}'
              type="button"
              class="button want-to-watch"
              data-view-sended="1"
            >
              <img
                class="img noneBg"
                alt="想看"
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/want-to-watch.png"
              /><span>想看</span></button
            ><a
              href="https://deeplink.maoyan.com/asgard/movie/1444523?channelId=4&amp;cityId=1&amp;postAnalytics=%7B%22channel%22%3A%22mymovie1yuan-dy%22%2C%22refer_page_id%22%3A%22c_dmLad%22%7D&amp;f=&amp;to=meituanmovie%3A%2F%2Fwww.meituan.com%2Fmovie%3Fid%3D1444523%26nm%3D%25E7%25A9%25BF%25E8%25BF%2587%25E5%25AF%2592%25E5%2586%25AC%25E6%258B%25A5%25E6%258A%25B1%25E4%25BD%25A0"
              class="link button btn-right watched"
              data-event="donwload3"
              link="meituanmovie://www.meituan.com/movie?id=1444523&amp;nm=%E7%A9%BF%E8%BF%87%E5%AF%92%E5%86%AC%E6%8B%A5%E6%8A%B1%E4%BD%A0"
              parentpage="movie"
              data-bid="b_53up23as"
              data-view-bid="b_movie_b_53up23as_mv"
              data-lab='{"utm_source":"","utm_content":"","position":"socre"}'
              pi="hLzIrquwKt7RANM3gEdKVvqD/3jZfPMqZsRoAzcj5com7NJXFaSqnLT1DAKWaR56k5e+yFqmTJnjExAf"
              data-pi="hLzIrquwKt7RANM3gEdKVvqD/3jZfPMqZsRoAzcj5com7NJXFaSqnLT1DAKWaR56k5e+yFqmTJnjExAf"
              data-view-sended="1"
              ><img
                class="img noneBg"
                alt="看过"
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star.png"
              /><span>看过</span></a
            >
          </div>
        </div>
      </div>
      <div class="real-time-word-of-mouth">
        <div class="top">
          <div class="left">
            <img
              class="img noneBg"
              alt="logo"
              src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/logo-new.png"
            /><span>泽枫影城内评分</span>
          </div>
          <div class="right">
            <div
              class="num"
              data-view-bid="b_movie_4r9fhgxi_mv"
              data-view-lab='{"movie_id":1444523,"type":"wantsee"}'
              data-view-sended="1"
            >
              <span>651,676</span>
              <span class="">人想看</span>
            </div>
            <div
              class="num watched"
              data-view-bid="b_movie_4r9fhgxi_mv"
              data-view-lab='{"movie_id":1444523,"type":"wantsee"}'
              data-view-sended="1"
            >
              <span>20,730,912</span>
              <span class="">人看过</span>
            </div>
            <a
              href="https://piaofang.maoyan.com/movie/1444523/audienceRating"
              class="link size-clear"
              data-event="https:__piaofang.maoyan.com_movie_1444523_audienceRating"
              ><img
                class="img noneBg"
                alt="向右箭头"
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right-white.png"
                width="0.1rem"
                height="0.18rem"
                style="margin-left: 0.08rem; margin-right: 0"
            /></a>
          </div>
        </div>
        <div class="middle">
          <div class="left-section">
            <div class="left">
              <span class="score" data-view-sended="1">{{
                DetailInfos.lists.grade
              }}</span>
              <div style="visibility: hidden; height: 0; width: 0">
                {{$route.params.filmId+'人评分'}}
              </div>
              <div class="people-grade" data-view-sended="1">
                <span>{{$route.params.filmId}}</span>&nbsp; <span class="">人评分</span>
              </div>
            </div>
            <div class="right">
              <a
                href="javascript:viod(0)"
                class="link"
                data-event="https:__piaofang.maoyan.com_movie_1444523_audienceRating"
                ><div class="stars-percent-bar">
                  <div class="stars">
                    <img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    />
                  </div>
                  <div class="bar">
                    <div class="percent" style="width: 92%"></div>
                  </div>
                </div>
                <div class="stars-percent-bar">
                  <div class="stars">
                    <img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    />
                  </div>
                  <div class="bar">
                    <div class="percent" style="width: 1.7%"></div>
                  </div>
                </div>
                <div class="stars-percent-bar">
                  <div class="stars">
                    <img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    />
                  </div>
                  <div class="bar">
                    <div class="percent" style="width: 1.9%"></div>
                  </div>
                </div>
                <div class="stars-percent-bar">
                  <div class="stars">
                    <img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    />
                  </div>
                  <div class="bar">
                    <div class="percent" style="width: 0.8%"></div>
                  </div>
                </div>
                <div class="stars-percent-bar">
                  <div class="stars">
                    <img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png"
                    /><img
                      class="img noneBg"
                      alt="star"
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"
                    />
                  </div>
                  <div class="bar">
                    <div class="percent" style="width: 3.5%"></div>
                  </div></div
              ></a>
            </div>
          </div>
          <div
            class="right-reputation"
            data-view-bid="b_movie_z9pck9p2_mv"
            data-view-lab='{"movie_id":1444523,"custom":{"rank":1,"content_name":"中国大陆票房榜"}}'
            data-view-sended="1"
          >
            <div class="reputation-box">
              <img
                class="img noneBg"
                alt="reputation"
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/top1-reputation.png"
              />
              <div class="rank">
                <span class="top">TOP</span><span class="rank-num">{{top}}</span>
              </div>
              <div class="desc">
                <span class="first-word">2022年3周</span
                ><span class="second-word">中国大陆票房榜</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="brief-introduction">
        <div class="title">
          <span>简介</span>
          <div @click="line_clamp_flag = !line_clamp_flag">
            <button
              type="button"
              :class="line_clamp_flag ? 'open' : 'close'"
              data-bid="b_y93QJ"
              data-lab='{"movie_id":1444523,"type":"open"}'
            >
              <span>展开</span
              ><img
                class="img noneBg"
                :alt="line_clamp_flag ? '向下箭头' : '向上箭头'"
                src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png"
              />
            </button>
          </div>
        </div>
        <div
          data-bid="b_y93QJ"
          data-lab='{"movie_id":1444523,"type":false}'
          class="content"
        >
          <p
            id="brief-introduction-content"
            :class="line_clamp_flag ? 'normal-line line-clamp' : 'normal-line'"
          >
            {{ DetailInfos.lists.synopsis }}
          </p>
        </div>
      </div>
      <div
        class="actors"
        data-view-bid="b_movie_byn3kcrc_mv"
        data-lab='{"movie_id":1444523}'
        data-view-sended="1"
      >
        <div class="title">
          <span>演职人员</span
          ><a
            data-bid="b_movie_l81ojcc4_mc"
            data-lab='{"movie_id":1444523}'
            class="go-to-all-actors"
            href="/asgard/movie/1444523/credits"
            ><span>全部</span
            ><img
              class="img noneBg"
              alt="arrow-right"
              src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png"
          /></a>
        </div>
        <div class="actor-list">
          <ul>
            <li
              :class="index == 0 ? '' : 'left-margin'"
              @click="preHandler(DetailInfos.lists.actors, index)"
              v-for="(per, index) in DetailInfos.lists.actors"
              :key="index"
            >
              <a href="javascript:void(0)" data-view-sended="1">
                <img
                  class="img"
                  :alt="'穿过寒冬拥抱你' + per.name"
                  :src="per.avatarAddress"
                  width="80"
                  height="112"
                  e="1"
                  c="1"
                />

                <span class="name">{{ per.name }}</span
                ><span class="role">{{
                  index == 0 ? per.role : `饰 ${per.role}`
                }}</span></a
              >
            </li>
          </ul>
        </div>
      </div>
      <div
        class="photos"
        v-if="DetailInfos.lists.photos"
      >
        <div class="title">
          <span>剧照</span
          ><a
            class="go-to-all"
            href="/asgard/movie/1277950/photos?nm=%E5%8F%8D%E8%B4%AA%E9%A3%8E%E6%9A%B45%EF%BC%9A%E6%9C%80%E7%BB%88%E7%AB%A0"
            ><span>{{ "全部" + DetailInfos.lists.photos.length + "张" }}</span
            ><img
              class="img noneBg"
              alt="arrow-right"
              src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right.png"
          /></a>
        </div>
        <div class="photos-list">
          <ul>
            <li
              :class="index == 0 ? '' : 'left-margin'"
              @click="phoHandler(DetailInfos.lists.photos, index)"
              v-for="(pho, index) in DetailInfos.lists.photos"
              :key="pho"
            >
              <a href="javascript:void(0)"
                ><img
                  class="img"
                  alt="avatar"
                  :src="pho"
                  width="140"
                  height="93"
                  e="1"
                  c="1"
              /></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <section v-if="DetailInfos"  class="discussion">
      <header>
        <span class="title" data-view-sended="1">短评</span>
      </header>
      <div class="comments">
        <article
          class="no-padding-top"
          data-view-bid="b_movie_b_h7xvl_mv"
          data-lab='{"movie_id":1444523,"commentId":1150536502}'
        >
          <div>
            <img
              class="img noneBg avatar"
              alt="avatar"
              src="//p1.meituan.net/maoyanuser/9415555adf9c9dfbd74faf64fb3ddbfc7632.jpg@68w_68h_80q"
              width="34"
              height="34"
            />
          </div>
          <div class="right">
            <div class="top">
              <div class="title-container">
                <div class="name-box">
                  <span class="name">仙人球</span
                  ><img
                    class="img noneBg level-icon"
                    alt="level-icon"
                    src="https://obj.pipi.cn/festatic/common/image/e3137a2114dfa0f5da5f0d6f5743c8cf.png"
                    width="31"
                    height="15"
                  />
                </div>
                <div class="commentstar">
                  <div class="star-wrap">
                    <img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><span class="star-score">10</span
                    ><span class="star-word">分</span>
                  </div>
                  <span class="commentstar-buyticket">购票</span>
                </div>
              </div>
              <div class="title-appove">
                <div class="hierarchy">
                  <a href="javasctipt:void(0)" class="link" data-view-sended="1"
                    ><img
                      class="img noneBg thumb-up"
                      alt="thumb-up"
                      src="//p1.meituan.net/scarlett/80f9c16d3e6ad90f7bc74cc4249b24151600.png@80q"
                      width="10"
                      height="10"
                    /><span class="approve-word">6325</span></a
                  >
                </div>
              </div>
            </div>
            <div class="middle">
              <a
                data-bid="b_h7xvl"
                data-lab='{"movie_id":1444523,"type":"hotComments","custom":{"commentId":1150536502}}'
                href="javascript:viod(0)"
                ><span class="comment-content"
                  >电影非常好看，笑点不断，也很感人。仿佛回到2020年初的那个冬天，大家齐心协力，每个人做好自己能做的，一件件小事温暖了那个寒冬，再坚持一下下，一切都会好的</span
                ></a
              >
            </div>
            <div class="bottom">
              <time class="time" title="1640956380000">12-31</time
              ><a data-bid="" class="goto-comments" href="javascript:viod(0)"
                ><span class="reply">1717<span>回复</span></span></a
              >
            </div>
          </div>
        </article>
        <div class="separator-line"></div>
        <article
          class=""
          data-view-bid="b_movie_b_h7xvl_mv"
          data-lab='{"movie_id":1444523,"commentId":1151186375}'
        >
          <div>
            <img
              class="img noneBg avatar"
              alt="avatar"
              src="//p1.meituan.net/avatar/c0aecd1b2037af4c98a2d489f655256414996.jpg@68w_68h_80q"
              width="34"
              height="34"
            />
          </div>
          <div class="right">
            <div class="top">
              <div class="title-container">
                <div class="name-box">
                  <span class="name">天道即是循环</span
                  ><img
                    class="img noneBg level-icon"
                    alt="level-icon"
                    src="https://obj.pipi.cn/festatic/common/image/e3137a2114dfa0f5da5f0d6f5743c8cf.png"
                    width="31"
                    height="15"
                  />
                </div>
                <div class="commentstar">
                  <div class="star-wrap">
                    <img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><span class="star-score">10</span
                    ><span class="star-word">分</span>
                  </div>
                  <span class="commentstar-buyticket">购票</span>
                </div>
              </div>
              <div class="title-appove">
                <div class="hierarchy">
                  <a href="javasctipt:void(0)" class="link" data-view-sended="1"
                    ><img
                      class="img noneBg thumb-up"
                      alt="thumb-up"
                      src="//p1.meituan.net/scarlett/80f9c16d3e6ad90f7bc74cc4249b24151600.png@80q"
                      width="10"
                      height="10"
                    /><span class="approve-word">3222</span></a
                  >
                </div>
              </div>
            </div>
            <div class="middle">
              <a
                data-bid="b_h7xvl"
                data-lab='{"movie_id":1444523,"type":"hotComments","custom":{"commentId":1151186375}}'
                href="javascript:viod(0)"
                ><span class="comment-content"
                  >这部电影真的很让我感触，因为20年初疫情最严重的时候我发了高烧，差不多39°7我的那个他没有抛下我不管，带着我一家挨着一家医院跑，问接不接发烧病人，他没有害怕自己感染，只是害怕我难受，带着我做核酸检测，确认不是以后松了口气，给我买药，陪我打针，回家以后吃药没用，整整烧了三天，整个人都是迷糊的是他一直不离不弃照顾我，而且那个时候我们一起吃了一个月的泡面，一颗青菜都没有，一天吃一顿，一顿一包面，现在想想那个时候熬过来真的不容易。不过最艰难的时候已经过去了，相信以后会更好！
                  2022，唯愿无疫</span
                ></a
              >
            </div>
            <div class="bottom">
              <time class="time" title="1641488100000">01-07</time
              ><a data-bid="" class="goto-comments" href="javascript:viod(0)"
                ><span class="reply">210<span>回复</span></span></a
              >
            </div>
          </div>
        </article>
        <div class="separator-line"></div>
        <article
          class=""
          data-view-bid="b_movie_b_h7xvl_mv"
          data-lab='{"movie_id":1444523,"commentId":1152247812}'
        >
          <div>
            <img
              class="img noneBg avatar"
              alt="avatar"
              src="//p0.meituan.net/maoyanuser/8b5a75c66ef4efb62fb695631b13419212452.png@68w_68h_80q"
              width="34"
              height="34"
            />
          </div>
          <div class="right">
            <div class="top">
              <div class="title-container">
                <div class="name-box">
                  <span class="name">hoo229541910</span
                  ><img
                    class="img noneBg level-icon"
                    alt="level-icon"
                    src="https://obj.pipi.cn/festatic/common/image/c853ef8e3cb69ad7bced9c38c39af045.png"
                    width="31"
                    height="15"
                  />
                </div>
                <div class="commentstar">
                  <div class="star-wrap">
                    <img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-half-graded.png"
                      width="9"
                      height="9"
                    /><span class="star-score">9</span
                    ><span class="star-word">分</span>
                  </div>
                  <span class="commentstar-buyticket">购票</span>
                </div>
              </div>
              <div class="title-appove">
                <div class="hierarchy">
                  <a href="javasctipt:void(0)" class="link" data-view-sended="1"
                    ><img
                      class="img noneBg thumb-up"
                      alt="thumb-up"
                      src="//p1.meituan.net/scarlett/80f9c16d3e6ad90f7bc74cc4249b24151600.png@80q"
                      width="10"
                      height="10"
                    /><span class="approve-word">6</span></a
                  >
                </div>
              </div>
            </div>
            <div class="middle">
              <a
                data-bid="b_h7xvl"
                data-lab='{"movie_id":1444523,"type":"hotComments","custom":{"commentId":1152247812}}'
                href="javascript:viod(0)"
                ><span class="comment-content"
                  >影片的片名取的很好，寒冬不可怕！有一种力量势不可挡的穿过了寒冬，这就是爱的力量，穿过寒冬是为了拥抱在寒冬中瑟瑟发抖无助的你，给你带了安慰和希望，寒冬里的拥抱带来的是温暖，更是家国情怀！拥抱象征着团结，团结一心的中国人能够战胜一切艰难险阻，朝着梦想和目标不断迈进！</span
                ></a
              >
            </div>
            <div class="bottom">
              <time class="time" title="1643000880000">7小时前</time
              ><a data-bid="" class="goto-comments" href="javascript:viod(0)"
                ><span class="reply">1<span>回复</span></span></a
              >
            </div>
          </div>
        </article>
        <div class="separator-line"></div>
        <article
          class=""
          data-view-bid="b_movie_b_h7xvl_mv"
          data-lab='{"movie_id":1444523,"commentId":1152130419}'
        >
          <div>
            <img
              class="img noneBg avatar"
              alt="avatar"
              src="//p0.meituan.net/maoyanuser/a1ced6e838eb64d61f0787e69701ada28584.jpg@68w_68h_80q"
              width="34"
              height="34"
            />
          </div>
          <div class="right">
            <div class="top">
              <div class="title-container">
                <div class="name-box">
                  <span class="name">邹英华</span
                  ><img
                    class="img noneBg level-icon"
                    alt="level-icon"
                    src="https://obj.pipi.cn/festatic/common/image/e3137a2114dfa0f5da5f0d6f5743c8cf.png"
                    width="31"
                    height="15"
                  />
                </div>
                <div class="commentstar">
                  <div class="star-wrap">
                    <img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-half-graded.png"
                      width="9"
                      height="9"
                    /><span class="star-score">9</span
                    ><span class="star-word">分</span>
                  </div>
                  <span class="commentstar-buyticket">购票</span>
                </div>
              </div>
              <div class="title-appove">
                <div class="hierarchy">
                  <a href="javasctipt:void(0)" class="link" data-view-sended="1"
                    ><img
                      class="img noneBg thumb-up"
                      alt="thumb-up"
                      src="//p1.meituan.net/scarlett/80f9c16d3e6ad90f7bc74cc4249b24151600.png@80q"
                      width="10"
                      height="10"
                    /><span class="approve-word">10</span></a
                  >
                </div>
              </div>
            </div>
            <div class="middle">
              <a
                data-bid="b_h7xvl"
                data-lab='{"movie_id":1444523,"type":"hotComments","custom":{"commentId":1152130419}}'
                href="javascript:viod(0)"
                ><span class="comment-content"
                  >人在江湖，义字为先，武汉疫情下小人物的爱情故事和众生相，冒着生命危险做志愿者的勇哥，能骑电动车也能开大货追求钢琴师的贾玲，谢大夫和广东厨师的黄昏恋，超市老板商人式的狡猾到自愿加入志愿者高龄喜提二胎，因公殉职的实习小护士，病毒虽然很猖狂，但只要心里有爱，最终都能穿过寒冬拥抱你，在樱花盛开的江城，在钢琴声围绕的鹦鹉洲长江大桥旁，在日夜交替的时候，我们又能与钢琴师小护士相遇。致敬平凡英雄，一个人终究太孤单，好好爱。</span
                ></a
              >
            </div>
            <div class="bottom">
              <time class="time" title="1642933920000">1天前</time
              ><a data-bid="" class="goto-comments" href="javascript:viod(0)"
                ><span class="reply">1<span>回复</span></span></a
              >
            </div>
          </div>
        </article>
        <div class="separator-line"></div>
        <article
          class=""
          data-view-bid="b_movie_b_h7xvl_mv"
          data-lab='{"movie_id":1444523,"commentId":1152244054}'
        >
          <div>
            <img
              class="img noneBg avatar"
              alt="avatar"
              src="//p0.meituan.net/avatar/01d6026413cafb2898df568cff22b8c715728.jpg@68w_68h_80q"
              width="34"
              height="34"
            />
          </div>
          <div class="right">
            <div class="top">
              <div class="title-container">
                <div class="name-box">
                  <span class="name">银河祺遇记</span
                  ><img
                    class="img noneBg level-icon"
                    alt="level-icon"
                    src="https://obj.pipi.cn/festatic/common/image/e3137a2114dfa0f5da5f0d6f5743c8cf.png"
                    width="31"
                    height="15"
                  />
                </div>
                <div class="commentstar">
                  <div class="star-wrap">
                    <img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><img
                      class="img noneBg star-img"
                      alt=""
                      src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/star-full-graded.png"
                      width="9"
                      height="9"
                    /><span class="star-score">10</span
                    ><span class="star-word">分</span>
                  </div>
                  <span class="commentstar-buyticket">购票</span>
                </div>
              </div>
              <div class="title-appove">
                <div class="hierarchy">
                  <a href="javasctipt:void(0)" class="link" data-view-sended="1"
                    ><img
                      class="img noneBg thumb-up"
                      alt="thumb-up"
                      src="//p1.meituan.net/scarlett/80f9c16d3e6ad90f7bc74cc4249b24151600.png@80q"
                      width="10"
                      height="10"
                    /><span class="approve-word">12</span></a
                  >
                </div>
              </div>
            </div>
            <div class="middle">
              <a
                data-bid="b_h7xvl"
                data-lab='{"movie_id":1444523,"type":"hotComments","custom":{"commentId":1152244054}}'
                href="javascript:viod(0)"
                ><span class="comment-content"
                  >就是说真的很哇塞，这部电影是有关疫情的嘛，然后里面就有一些情节比较触动我，就比如说一个认识的朋友或者一个你很亲的亲人突然一下就去世了，我真的会绷不住，所以就是看到武哥突然知道晓晓因为疫情去世的时候就哭了，真的突然一下就想到了我一个很亲很亲对我来说很重要的一位亲人，他是因为癌症突然去世的，真的很能感同身受。就是说拍也拍的非常好，整个电影看下来就是一整个喜欢住了，在结尾的那句“拥抱吧，就现在！”我觉得出现的非常时候哈哈哈哈哈，刚哭完的情绪还没怎么缓过来，突然看到这句话，就和坐我旁边的和我一起去看的朋友拥抱了，抱住的那一瞬间又绷不住了，又哭了。可能我是泪点低的原因吧，不过真的很推荐这部电影！非常好看！！《穿过寒冬拥抱你》YYDS！！</span
                ></a
              >
            </div>
            <div class="bottom">
              <time class="time" title="1642950060000">21小时前</time
              ><a data-bid="" class="goto-comments" href="javascript:viod(0)"
                ><span class="reply">3<span>回复</span></span></a
              >
            </div>
          </div>
        </article>
      </div>
      <div class="separator-line"></div>
      <footer>
        <a
          href="https://deeplink.maoyan.com/asgard/movie/1444523?channelId=4&amp;cityId=1&amp;postAnalytics=%7B%22channel%22%3A%22mymovie1yuan-dy%22%2C%22refer_page_id%22%3A%22c_dmLad%22%7D&amp;f=&amp;to=meituanmovie%3A%2F%2Fwww.meituan.com%2Fmovie%3Fid%3D1444523%26nm%3D%25E7%25A9%25BF%25E8%25BF%2587%25E5%25AF%2592%25E5%2586%25AC%25E6%258B%25A5%25E6%258A%25B1%25E4%25BD%25A0"
          class="link goto-all-comments"
          data-event="donwload3"
          link="meituanmovie://www.meituan.com/movie?id=1444523&amp;nm=%E7%A9%BF%E8%BF%87%E5%AF%92%E5%86%AC%E6%8B%A5%E6%8A%B1%E4%BD%A0"
          parentpage="movie"
          data-bid="b_53up23as"
          data-view-bid="b_movie_b_53up23as_mv"
          data-lab='{"movieId":1444523,"utm_source":"","utm_content":"","position":"comment"}'
          pi="hLzIrquwKt7RANM3gEdKVvqD/3jZfPMqZsRoAzcj5com7NJXFaSqnLT1DAKWaR56k5e+yFqmTJnjExAf"
          data-pi="hLzIrquwKt7RANM3gEdKVvqD/3jZfPMqZsRoAzcj5com7NJXFaSqnLT1DAKWaR56k5e+yFqmTJnjExAf"
          data-view-sended="1"
          ><span>打开App，查看全部49805个短评</span
          ><img
            class="img noneBg arrow-right-red"
            alt="arrow-r-red"
            src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/arrow-right-red.png"
            width="6"
            height="11"
        /></a>
      </footer>
    </section>
    <div class="buy-ticket-btns can-buys">
      <div class="buy-wrapper">
        <img
        @click="showShare=!showShare"
          class="img noneBg"
          alt=""
          src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/share-icon.png"
          data-view-sended="1"
        />
        <router-link :to="'/film/'+$route.params.filmId+'/cinames'" class="goto-ticket">特惠购票</router-link>
      </div>
      <van-share-sheet
      ref="bbj"
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />
    </div>
  </div>
</template>
<script>
import http from "../../utils/htttp";
import movieAd from "../movie/movie_ad.vue";
import Vue from "vue";
import * as moment from "moment";
moment.locale(["zh-cn", "zh-tw"]);
import { ImagePreview, ShareSheet } from "vant";
// 全局注册
Vue.use(ImagePreview).use(ShareSheet);
export default {
  components: {
    movieAd,
  },
  data() {
    return {
      DetailInfos: null,
      top:0,
      bg: "",
      actorNameArr: [],
      line_clamp_flag: true,
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat",className:'data_share'},
          { name: "朋友圈", icon: "wechat-moments" ,className:'data_share'},
          { name: "微博", icon: "weibo",className:'data_share' },
          { name: "QQ", icon: "qq",className:'data_share'},
        ],
        [
          { name: "复制链接", icon: "link" ,className:'data_share'},
          { name: "分享海报", icon: "poster",className:'data_share' },
          { name: "二维码", icon: "qrcode",className:'data_share' },
          { name: "小程序码", icon: "weapp-qrcode" ,className:'data_share'},
        ],
      ],
    };
  },
  filters: {
    setTimerFilter(timer) {
      return moment(timer).format("YYYY-MM-DD HH:mm");
    },
  },
  async mounted() {

    document.querySelector('body').className = 'detail-page-body'
    // console.log(this.$refs.bbj.$children[0].$slots.default[1].data.class);
    this.DetailInfos = await this.getDetailInfos();
    this.bg = this.DetailInfos.bg;
    this.top = this.DetailInfos.top
    this.actorNameArr = this.DetailInfos.lists.actors.filter(
      (item) => item.role != "导演"
    );
    this.$nextTick(() => {
      // console.log(this.$refs.actors);
      if (this.$refs.actors.innerHTML == "暂无主演") return;
      this.$refs.actors[this.$refs.actors.length - 1].innerHTML =
        this.$refs.actors[this.$refs.actors.length - 1].textContent.replace(
          /\//,
          ""
        );
    });
  },

  methods: {
    //演职人员预览图
    preHandler(perArr, index) {
      let images = perArr.map((item) => item.avatarAddress);
      ImagePreview({
        images: images,
        closeable: true,
        startPosition: index,
      });
    },
    //剧照预览图
    phoHandler(phoArr, index) {
      ImagePreview({
        images: phoArr,
        closeable: true,
        startPosition: index,
      });
    },
    //获取影片详情数据
    getDetailInfos() {
      return new Promise((res) => {
        http("/detail", {
          params: {
            filmId: this.$route.params.filmId,
          },
        }).then((data) => {
          res({ bg: data.data.bg, lists: data.data.datas ,top:data.data.top});
        });
      });
    },
  },
};
</script>
<style>
.detail-page-body #movie_main{
  overflow: auto;
}
.data_share{
  flex: 1;
}
.share .van-share-sheet__options{
  justify-content: space-around;
}
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
[hidden],
template {
  display: none;
}
.link {
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: transparent;
}

.link-disable {
  color: #ccc !important;
}

.img {
  border: 0;
  display: inline-block;
  background: #f5f5f5
    url("")
    no-repeat 50%;
  background-size: 50%;
}

.img-circle {
  border-radius: 50%;
}

.img-bordered {
  border: 2px solid red;
}

.img-avatar {
  background-size: 100%;
  background-image: url(//s0.meituan.net/bs/myfe/canary/file/asgard/images/avatar.png);
}

.img.avatar-img {
  background: #f5f5f5
    url("")
    no-repeat 50%;
  background-size: 100%;
}

.img.noneBg {
  background: none;
}

.download-app-bar {
  position: relative;
  min-height: 1.28rem;
  background-color: #fff;
  z-index: 11;
}

.download-app-bar h1 {
  display: inline;
}

.download-app-bar img.logo {
  position: absolute;
  left: 0.3rem;
  top: 0.22rem;
  width: 0.84rem;
  height: 0.84rem;
}

.download-app-bar .app-name-desc {
  position: absolute;
  left: 1.33rem;
  top: 0.23rem;
}

.download-app-bar .app-name-desc .app-name {
  font-size: 0.34rem;
  color: #222;
  line-height: 0.46rem;
}

.download-app-bar .app-name-desc .app-desc {
  font-size: 0.24rem;
  color: #999;
}

.download-app-bar .btn-open-app {
  position: absolute;
  right: 0.3rem;
  top: 0.34rem;
  width: 1.36rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  background: #ef4238;
  border-radius: 0.06rem;
  font-size: 0.26rem;
  color: #fff;
}

.download-app-bar-custom {
  position: relative;
  height: 1.2rem;
  width: 100%;
  background-color: #fff;
  z-index: 11;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  left: 0;
  top: 0;
  top: constant(safe-area-inset-top);
  top: env(safe-area-inset-top);
  border-bottom: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
}

.download-app-bar-custom h1 {
  display: inline;
}

.download-app-bar-custom .logo_custom {
  position: absolute;
  left: 0.28rem;
  top: 0.2rem;
  width: 1.88rem;
  height: 0.78rem;
}

.download-app-bar-custom .benefit-img {
  display: inline-block;
  position: absolute;
  right: 2rem;
  height: 0.5rem;
}

.download-app-bar-custom .benefit-text {
  display: inline-block;
  position: absolute;
  height: 0.34rem;
  line-height: 0.34rem;
  right: 2rem;
  font-size: 13px;
  font-family: PingFangSC-Regular, Arial, Helvetica, sans-seri;
  font-weight: 620;
  color: #666;
  text-decoration: none;
}

.download-app-bar-custom .split {
  display: inline-block;
  position: absolute;
  right: 1.79rem;
  width: 0.02rem;
  height: 0.52rem;
  line-height: 0.52rem;
  background: rgba(0, 0, 0, 0.1);
  transform: scale(0.5);
}

.download-app-bar-custom .point {
  padding-left: 0.02rem;
}

.download-app-bar-custom .btn-open-app-custom {
  position: absolute;
  right: 0.24rem;
  height: 0.4rem;
  line-height: 0.4rem;
  font-weight: 700;
  text-align: center;
  font-size: 15px;
  font-family: PingFangSC-Medium, Arial, Helvetica, sans-serif;
  color: #b37e7e;
}

.tip-open-app {
  position: fixed;
  right: 0;
  bottom: 2.4rem;
  width: 2.2rem;
  height: 0.76rem;
  line-height: 0.76rem;
  z-index: 10;
  opacity: 0.94;
  background-image: linear-gradient(134deg, #fb3333, #ff5269 75%);
  box-shadow: 0 2px 4px 0 rgba(160, 44, 41, 0.15);
  border-radius: 20px 0 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tip-open-app div {
  color: #fff;
  margin-left: 0.1rem;
}

.tip-open-app img {
  width: 0.46rem;
  height: 0.46rem;
}

@media (max-width: 360px) {
  .btn-open-app-custom {
    top: 0.37rem;
  }

  .split {
    top: 0.27rem;
  }

  .download-app-bar-custom .split {
    right: 1.85rem;
  }
}

@media (min-width: 375px) {
  .btn-open-app-custom {
    top: 0.37rem;
  }

  .split {
    top: 0.3rem;
  }
}

@media (min-width: 375px) {
  .download-app-bar-custom .btn-open-app-custom {
    font-size: 16px;
  }

  .download-app-bar-custom .benefit-text {
    font-size: 14px;
  }

  .download-app-bar-custom .split {
    right: 1.82rem;
  }
}

@media (min-width: 1024px) {
  .download-app-bar-custom .btn-open-app-custom {
    font-size: 0.699rem;
  }

  .download-app-bar-custom .benefit-text {
    font-size: 0.583rem;
  }
}

.share-tip {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.75);
}

.share-tip .tip-arrow {
  width: 0.63rem;
  top: 0.09rem;
  right: 0.65rem;
  position: fixed;
}

.share-tip .tip {
  font-size: 0.3rem;
  color: #fff;
  top: 0.98rem;
  right: 0.86rem;
  position: fixed;
}

.share-tip-down {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.75);
}

.share-tip-down .tip-arrow {
  height: 0.68rem;
  width: 0.56rem;
  left: 3.74rem;
  bottom: 0.24rem;
  position: fixed;
  transform: rotate(180deg);
}

.share-tip-down .tip {
  font-size: 0.3rem;
  color: #fff;
  left: 2.86rem;
  bottom: 1.176rem;
  position: fixed;
}

.toast-cover {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 0;
}

.toast {
  box-sizing: border-box;
  margin: -0.45rem 0 0 -35%;
  padding: 0.2rem 0.32rem;
  width: 70%;
  line-height: 0.5rem;
  font-size: 0.26rem;
  text-align: center;
  top: 50%;
  left: 50%;
  color: #fff;
  background: #000;
  opacity: 0;
  border-radius: 0.2rem;
  transition: opacity 1s;
}

.buy-ticket-btns,
.toast {
  position: fixed;
  z-index: 10;
}

.buy-ticket-btns {
  background-color: #fff;
  height: 1.2rem;
  width: 100%;
  border-top-left-radius: 0.1rem;
  border-top-right-radius: 0.1rem;
  overflow: hidden;
  margin: 0;
  bottom: 0;
  left: 0;
}

.buy-ticket-btns .buy-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.buy-ticket-btns .buy-wrapper a.goto-ticket {
  flex: 1;
  height: 0.88rem;
  background-image: linear-gradient(-90deg, #fb3333, #ff5269);
  box-shadow: 0 0.06rem 0.12rem 0 rgba(251, 51, 51, 0.3);
  border-radius: 0.5rem;
  font-size: 0.34rem;
  color: #fff;
  text-align: center;
  line-height: 0.88rem;
  margin: 0 0.2rem;
}

.buy-ticket-btns.iphone-x {
  padding-bottom: 0.16rem;
}

.buy-ticket-btns.can-buys .buy-wrapper >img,
.buy-ticket-btns.cannot-buy img {
  margin-left: 0.48rem;
  margin-right: 0.6rem;
  width: 0.38rem;
  height: 0.38rem;
}

.stars-percent-bar {
  display: flex;
  align-items: center;
  margin-bottom: 0.06rem;
}

.stars-percent-bar .stars {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 0.7rem;
}

.stars-percent-bar .stars img {
  height: 0.1rem;
  width: 0.1rem;
  margin-left: 0.026rem;
  opacity: 0.4;
}

.stars-percent-bar .bar {
  width: 1.42rem;
  height: 0.08rem;
  background-color: hsla(0, 0%, 100%, 0.06);
  border-radius: 0.02rem;
  margin-left: 0.08rem;
}

.stars-percent-bar .bar > .percent {
  height: 100%;
  width: 0;
  background: hsla(0, 0%, 100%, 0.3);
  border-radius: 0.02rem;
  transition: width 1.5s;
}

.stars-percent-bar .percent-value {
  opacity: 0.4;
  font-size: 0.14rem;
}

.stars-percent-bar:last-child {
  margin-bottom: 0;
}

.right-reputation {
  margin-right: 0.1rem;
  width: 2.4rem;
  display: flex;
  justify-content: flex-end;
  align-self: center;
}

.right-reputation .reputation-box {
  width: 2.4rem;
  height: 0.88rem;
  box-sizing: border-box;
  background-image: linear-gradient(
    270deg,
    rgba(0, 0, 0, 0.04),
    rgba(226, 177, 117, 0.11)
  );
  border-radius: 0.12rem;
  padding: 0.08rem;
  position: relative;
}

.right-reputation .reputation-box:after {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #b49c70;
  content: " ";
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  border-radius: 0.24rem;
}

.right-reputation .reputation-box .img {
  width: 0.58rem;
  height: 0.72rem;
}

.right-reputation .reputation-box .rank {
  position: absolute;
  left: 0;
  top: 0.18rem;
  display: flex;
  flex-direction: column;
  font-family: PingFangSC-Medium;
  width: 0.58rem;
  margin-left: 0.08rem;
}

.right-reputation .reputation-box .rank .top {
  font-size: 0.36rem;
  line-height: 0.2rem;
  font-weight: 600;
  text-shadow: 0 1px 4px #8e5d25;
  font-family: PingFangSC-Semibold;
  color: rgba(255, 229, 150, 0.7);
  letter-spacing: 0;
  transform: scale(0.5);
  width: 19px;
  transform-origin: 50%;
}

.right-reputation .reputation-box .rank .rank-num {
  font-size: 0.3rem;
  line-height: 0.26rem;
  font-family: MaoYanHeiTi-H-H;
  color: #ffe186;
  letter-spacing: 0;
  text-align: center;
  margin-top: 0.06rem;
}

.right-reputation .reputation-box .desc {
  position: absolute;
  left: 0.76rem;
  top: 0.16rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  width: 85px;
}

.right-reputation .reputation-box .desc .first-word {
  font-weight: 400;
  font-family: PingFangSC-Regular;
  opacity: 0.7;
  font-size: 0.4rem;
  color: #ffeec1;
  letter-spacing: 0;
  height: 0.26rem;
  line-height: 0.26rem;
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
  transform-origin: 0;
}

.right-reputation .reputation-box .desc .second-word {
  font-weight: 500;
  font-family: PingFangSC-Medium;
  color: #fff4bd;
  letter-spacing: 0;
  line-height: 0.28rem;
  height: 0.28rem;
  text-shadow: 0 1px 3px rgba(166, 97, 48, 0.5);
  font-size: 0.44rem;
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
  transform-origin: 0;
}

.awards-box {
  position: relative;
  height: 0.56rem;
  white-space: nowrap;
}

.awards-box .default {
  transition: all 0.5s;
}

.awards-box .default,
.awards-box .stable {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: 400;
  opacity: 0.7;
  font-family: PingFangSC-Regular;
  font-size: 0.24rem;
  color: #fffadf;
  letter-spacing: 0;
  text-shadow: 0 1px 3px rgba(166, 97, 48, 0.5);
}

.awards-box .default .award-link,
.awards-box .stable .award-link {
  display: flex;
  align-items: center;
  height: 0.34rem;
  line-height: 0.34rem;
  overflow: hidden;
}

.awards-box .default .avatars,
.awards-box .stable .avatars {
  overflow: hidden;
  width: 100%;
}

.awards-box .default .avatars .avatar-img,
.awards-box .stable .avatars .avatar-img {
  width: 0.3rem;
  height: 0.3rem;
  margin-right: 0.14rem;
}

.awards-box .default .avatars .content,
.awards-box .stable .avatars .content {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
  line-height: 0.34rem;
  height: 0.34rem;
}

.awards-box .default .avatars .awardDetail,
.awards-box .stable .avatars .awardDetail {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 170px;
}

.awards-box .default .avatars .placeholder,
.awards-box .stable .avatars .placeholder {
  flex-grow: 1;
}

.awards-box .default .avatars .awardInfo,
.awards-box .default .avatars .nominate,
.awards-box .stable .avatars .awardInfo,
.awards-box .stable .avatars .nominate {
  color: hsla(0, 0%, 100%, 0.6);
  text-align: right;
}

.awards-box .default .avatars .nominate,
.awards-box .stable .avatars .nominate {
  margin-left: 5px;
}

.awards-box .hide-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.34rem);
}

.awards-box .show-middle {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.awards-box .hide-bottom {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.34rem);
}

.avatar-box {
  position: relative;
  width: 3.4rem;
  height: 0.28rem;
  margin: 0 auto;
}

.avatar-box .default {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 1s;
  color: #fff;
  display: flex;
  justify-content: center;
  font-size: 10px;
  font-weight: 400;
}

.avatar-box .default .avatars {
  display: flex;
}

.avatar-box .default .avatars .avatar-img {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  margin-left: -0.04rem;
}

.avatar-box .default .wish-txt {
  margin: 0 0.08rem;
  opacity: 0.6;
}

.avatar-box .default .mark-time {
  opacity: 0.4;
}

.avatar-box .hide-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.28rem);
}

.avatar-box .show-middle {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.avatar-box .hide-bottom {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.28rem);
}

.grade-stars {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 0.14rem;
  padding-bottom: 0.04rem;
}

.grade-stars .grade-star {
  width: 0.28rem;
  height: 0.28rem;
}

.star-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
}

.star-wrap .grade-stars img {
  width: 0.22rem;
  height: 0.22rem;
}

.imdb {
  font-weight: 400;
  font-family: PingFangSC-Regular;
  font-size: 0.2rem;
  opacity: 0.6;
  transform: translateX(-50%);
  zoom: 0.5;
}

.real-time-word-of-mouth {
  background-color: rgba(0, 0, 0, 0.18);
  border-radius: 0.16rem;
  margin-top: 0.3rem;
  padding: 0.18rem 0.2rem 0.2rem 0;
  box-sizing: border-box;
}

.real-time-word-of-mouth .size-clear {
  font-size: 0;
}

.real-time-word-of-mouth > .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: PingFangSC-Regular;
  padding-left: 0.2rem;
}

.real-time-word-of-mouth > .top img {
  width: 0.312rem;
  height: 0.312rem;
  margin-right: 0.08rem;
}

.real-time-word-of-mouth > .top > .left {
  font-size: 0.24rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 400;
}

.real-time-word-of-mouth > .top > .right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.2rem;
  margin-right: 0.04rem;
}

.real-time-word-of-mouth > .top > .right > span {
  font-weight: 400;
  font-family: PingFangSC-Regular;
  opacity: 0.6;
}

.real-time-word-of-mouth > .top > .right img {
  width: 0.1rem;
  height: 0.18rem;
}

.real-time-word-of-mouth > .top > .right .num {
  opacity: 0.6;
  font-size: 0.22rem;
}

.real-time-word-of-mouth > .top > .right .num.watched {
  margin-left: 0.26rem;
}

.real-time-word-of-mouth > .middle {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.22rem 0 0.06rem;
}

.real-time-word-of-mouth > .middle > .left-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.real-time-word-of-mouth > .middle > .left-section > .wanted {
  align-items: center !important;
}

.real-time-word-of-mouth > .middle > .left-section > .left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 0.08rem;
}

.real-time-word-of-mouth > .middle > .left-section > .left .score {
  font-weight: 600;
  font-family: MaoYanHeiTi-H-H;
  font-size: 0.52rem;
  color: #ffb400;
  line-height: 0.52rem;
  letter-spacing: 0;
  text-align: center;
  margin-bottom: 0.08rem;
}

.real-time-word-of-mouth > .middle > .left-section > .left .people-grade {
  font-weight: 400;
  opacity: 0.6;
  font-family: PingFangSC-Regular;
  font-size: 0.4rem;
  display: flex;
  word-break: keep-all;
  color: hsla(0, 0%, 100%, 0.4);
  letter-spacing: 0;
  text-align: center;
  line-height: 0.2rem;
  zoom: 0.5;
}

.real-time-word-of-mouth > .middle > .left-section > .left .txt {
  font-size: 0.24rem;
  color: #fff;
  opacity: 0.8;
}

.real-time-word-of-mouth > .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.21rem;
}

.real-time-word-of-mouth > .bottom > .left {
  font-size: 0.24rem;
  color: #ffe4a2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.real-time-word-of-mouth > .bottom > .right img {
  width: 0.1rem;
  height: 0.16rem;
}

.real-time-word-of-mouth > .awardBottom {
  margin-top: 0.14rem;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 0.12rem;
  padding: 0 0.1rem 0 0.22rem;
  margin-left: 0.2rem;
}

.real-time-word-of-mouth.non-theater-chain-not-graded > .top > .right {
  font-size: 0.22rem;
}

.real-time-word-of-mouth.non-theater-chain-not-graded > .top > .right .num {
  font-size: 0.26rem;
}

.real-time-word-of-mouth.non-theater-chain-graded > .top > .right {
  font-size: 0.22rem;
}

.real-time-word-of-mouth.non-theater-chain-graded > .top > .right .num {
  font-size: 0.26rem;
}

.real-time-word-of-mouth.non-theater-chain-graded > .top > .right .score {
  font-size: 0.32rem;
  color: #ffb400;
  opacity: 1;
  margin-left: 0.12rem;
}

.watched-graded {
  height: 0.6rem;
  background-color: hsla(0, 0%, 100%, 0.05);
  opacity: 0.95;
  border-radius: 0.4rem;
  font-size: 0.24rem;
  color: #fff;
  justify-content: space-between;
}

.watched-graded,
.watched-graded > div {
  display: flex;
  align-items: center;
}

.watched-graded > div.left-part {
  justify-content: flex-start;
}

.watched-graded > div.right-part {
  justify-content: flex-end;
}

.watched-graded .my-avatar {
  box-sizing: border-box;
  height: 0.6rem;
  width: 0.6rem;
  border-radius: 0.3rem;
  margin-right: 0.12rem;
}

.watched-graded .score {
  color: #ffb400;
  margin: 0 0.04rem;
}

.watched-graded .score-unit {
  color: #ffb400;
}

.watched-graded .separator-vertical {
  background-color: hsla(0, 0%, 100%, 0.2);
  width: 0.02rem;
  height: 0.32rem;
}

.watched-graded .go-grade-btn,
.watched-graded .share-btn {
  color: #fff;
  opacity: 0.9;
  margin-left: 0.16rem;
  margin-right: 0.24rem;
}

.watched-not-grade {
  height: 0.6rem;
  background-color: hsla(0, 0%, 100%, 0.05);
  opacity: 0.95;
  border-radius: 0.4rem;
  font-size: 0.24rem;
  color: #fff;
  justify-content: space-between;
}

.watched-not-grade,
.watched-not-grade > div {
  display: flex;
  align-items: center;
}

.watched-not-grade > div.left-part {
  justify-content: flex-start;
}

.watched-not-grade > div.right-part {
  justify-content: flex-end;
}

.watched-not-grade .my-avatar {
  box-sizing: border-box;
  height: 0.6rem;
  width: 0.6rem;
  border: 0.02rem solid #fff;
  border-radius: 0.6rem;
  margin-right: 0.12rem;
}

.watched-not-grade .score {
  color: #ffb400;
  margin: 0 0.04rem;
}

.watched-not-grade .score-unit {
  color: #ffb400;
}

.watched-not-grade .separator-line {
  background-color: hsla(0, 0%, 100%, 0.2);
  width: 0.02rem;
  height: 0.32rem;
}

.watched-not-grade .go-grade-btn,
.watched-not-grade .share-btn {
  color: #fff;
  opacity: 0.9;
  margin-left: 0.16rem;
  margin-right: 0.24rem;
}

.activity-bar {
  margin: 0.5rem 0 0.26rem;
}

.activity-bar a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-bar .left {
  font-size: 0.3rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.activity-bar .left img {
  width: 0.32rem;
  height: 0.32rem;
  margin-right: 0.16rem;
  vertical-align: text-top;
}

.activity-bar .left span {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.activity-bar .right {
  font-size: 0.24rem;
  flex-shrink: 0;
}

.activity-bar .right span {
  opacity: 0.6;
}

.activity-bar .right img {
  width: 0.1rem;
  height: 0.18rem;
  margin-left: 0.12rem;
}

.movie-watching-tips {
  position: relative;
  padding: 0.2rem 0;
  font-size: 0.3rem;
}

.movie-watching-tips .tip {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0.1rem 0;
}

.movie-watching-tips .tip .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.36rem;
  height: 0.36rem;
  margin-right: 0.14rem;
}

.movie-watching-tips .tip .icon img {
  max-width: 100%;
  height: 100%;
}

.movie-watching-tips button {
  position: absolute;
  top: 0.28rem;
  right: -0.34rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.24rem;
  opacity: 1;
  color: #fff;
  width: 0.9rem;
  height: 0.4rem;
}

.movie-watching-tips button img {
  width: 0.1rem;
  height: 0.18rem;
}

.movie-watching-tips button.open img {
  transform: rotate(90deg);
}

.movie-watching-tips button.close img {
  transform: rotate(-90deg);
}

.brief-introduction {
  position: relative;
  padding: 0.32rem 0 0;
}

.brief-introduction:after {
  content: "";
  display: table;
}

.brief-introduction > .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brief-introduction > .title > span {
  font-size: 0.3rem;
}

.brief-introduction > .title > div button {
  font-size: 0.24rem;
  opacity: 0.6;
  color: #fff;
  width: 0.9rem;
}

.brief-introduction > .title > div button img {
  width: 0.1rem;
  height: 0.16rem;
  margin-left: 0.12rem;
}

.brief-introduction > .title > div button.open img {
  transform: rotate(90deg);
}

.brief-introduction > .title > div button.close img {
  transform: rotate(-90deg);
}

.brief-introduction > .content {
  font-size: 0.3rem;
  line-height: 0.52rem;
  overflow: hidden;
}

.brief-introduction > .content p {
  margin: 0.14rem 0;
  text-align: justify;
}

.brief-introduction > .content p.normal-line {
  word-wrap: break-word;
  word-break: break-all;
}

.brief-introduction > .content p.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
}

.brief-introduction > .content.height-limit {
  height: 1.8rem;
  margin-bottom: 0.04rem;
}

a {
  text-decoration: none;
}

.recessive-dialog {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.recessive-dialog .recessive-dialog-modal {
  width: 5.6rem;
  height: 2.64rem;
  background: #fff;
  border-radius: 0.3rem;
}

.recessive-dialog .recessive-dialog-modal .recessive-dialog-title {
  height: 1.68rem;
  line-height: 1.68rem;
  text-align: center;
  color: #333;
  font-size: 0.34rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.recessive-dialog .recessive-dialog-modal .recessive-dialog-buttons {
  display: flex;
  height: 0.95rem;
}

.recessive-dialog
  .recessive-dialog-modal
  .recessive-dialog-buttons
  .recessive-dialog-cancel-button {
  flex-grow: 1;
  text-align: center;
  font-size: 0.34rem;
  line-height: 0.95rem;
  color: #333;
}

.recessive-dialog
  .recessive-dialog-modal
  .recessive-dialog-buttons
  .recessive-dialog-ok-button {
  flex-grow: 1;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 0.34rem;
  line-height: 0.95rem;
  color: #f03d37;
}

.actors {
  margin: 0.36rem 0 0.3rem;
}

.actors .title {
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.actors .title .go-to-all-actors {
  opacity: 0.6;
  font-size: 0.24rem;
}

.actors .title .go-to-all-actors img {
  width: 0.1rem;
  height: 0.16rem;
  margin-left: 0.12rem;
}

.actors .actor-list {
  margin-top: 0.22rem;
}

.actors .actor-list ul {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-x: scroll;
}

.actors .actor-list ul li {
  flex-shrink: 0;
}

.actors .actor-list ul li > a {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 1.64rem;
}

.actors .actor-list ul li > a img {
  width: 1.6rem;
  height: 2.24rem;
  display: block;
  background: none;
}

.actors .actor-list ul li > a .name,
.actors .actor-list ul li > a .role {
  font-size: 0.24rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-align: center;
}

.actors .actor-list ul li > a .role {
  opacity: 0.4;
}

.actors .actor-list ul li.left-margin {
  margin-left: 0.12rem;
}

.photos {
  margin-top: 0.36rem;
}

.photos .title {
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.photos .title .go-to-all {
  opacity: 0.6;
  font-size: 0.24rem;
}

.photos .title .go-to-all img {
  width: 0.1rem;
  height: 0.16rem;
  margin-left: 0.12rem;
}

.photos .photos-list {
  margin-top: 0.22rem;
}

.photos .photos-list ul {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-x: scroll;
}

.photos .photos-list ul li {
  flex-shrink: 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.photos .photos-list ul li img {
  width: 2.8rem;
  height: 1.86rem;
}

.photos .photos-list ul li.left-margin {
  margin-left: 0.16rem;
}

.videos {
  margin-top: 0.36rem;
}

.videos .title {
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.videos .title .go-to-all {
  opacity: 0.6;
  font-size: 0.24rem;
}

.videos .title .go-to-all img {
  width: 0.1rem;
  height: 0.16rem;
  margin-left: 0.12rem;
}

.videos .videos-list {
  margin-top: 0.22rem;
}

.videos .videos-list ul {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-x: scroll;
}

.videos .videos-list ul li {
  flex-shrink: 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: 0.16rem;
}

.videos .videos-list ul li .bacImg,
.videos .videos-list ul li .imgMask {
  width: 2.8rem;
  height: 1.86rem;
  border-radius: 0.16rem;
  background: rgba(0, 0, 0, 0.7);
}

.videos .videos-list ul li .coverImg {
  position: absolute;
  width: auto;
  height: 1.86rem;
  background: none;
}

.videos .videos-list ul li .imgMask {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 0.155rem;
}

.videos .videos-list ul li.video > a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.videos .videos-list ul li.video > a .play {
  position: absolute;
  top: 0.61rem;
  left: 1.08rem;
  box-sizing: border-box;
  width: 0.64rem;
  height: 0.64rem;
  background: hsla(0, 0%, 100%, 0.9);
  box-shadow: 0 0 0.04rem 0 rgba(0, 0, 0, 0.3);
  border-radius: 0.32rem;
}

.videos .videos-list ul li.video > a .play .triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent transparent transparent #222;
  border-style: solid;
  border-width: 0.12rem 0.18rem;
  top: 0.2rem;
  left: 0.26rem;
}

.videos .videos-list ul li.video > a .featuredFirst {
  position: absolute;
  left: 0.08rem;
  top: 0.08rem;
  width: 0.3rem;
  height: 0.26rem;
}

.grade-after-watched {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #fff;
  width: 100%;
  height: 100%;
}

.grade-after-watched header {
  box-sizing: border-box;
  height: 0.9rem;
  background-color: #fdfdfe;
  border-bottom: 0.02rem solid #e8e8e8;
  overflow: hidden;
  text-align: center;
  line-height: 0.88rem;
}

.grade-after-watched header .title {
  font-size: 0.34rem;
  color: #333;
}

.grade-after-watched header .cancel {
  font-size: 0.26rem;
  color: #666;
  padding: 0 0.3rem;
  height: 100%;
  float: left;
}

.grade-after-watched header .publish {
  width: 0.92rem;
  height: 0.5rem;
  border-radius: 0.06rem;
  background-color: #f03d37;
  font-size: 0.26rem;
  color: #fff;
  line-height: 0.5rem;
  margin: 0.19rem 0.3rem 0 0;
  float: right;
}

.grade-after-watched header .publish.disbled {
  background-color: #d8d8d8;
}

.grade-after-watched .grade {
  height: 2.44rem;
  box-sizing: border-box;
  border-bottom: 0.02rem solid #e8e8e8;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.grade-after-watched .grade .score-box {
  font-size: 0.26rem;
  color: #faaf00;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.1;
}

.grade-after-watched .grade .score-box .score {
  font-size: 0.56rem;
  margin-right: 0.04rem;
}

.grade-after-watched .grade .tip {
  font-size: 0.24rem;
  color: #aaa;
  text-align: center;
  margin: 0 0 0.14rem;
}

.grade-after-watched .grade .stars {
  display: flex;
  justify-content: center;
}

.grade-after-watched .grade .stars .star {
  margin: 0 0.12rem;
  position: relative;
  overflow: hidden;
}

.grade-after-watched .grade .stars .star img {
  height: 0.6rem;
  width: 0.6rem;
  display: block;
}

.grade-after-watched .grade .stars .star .left {
  height: 100%;
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.grade-after-watched .grade .stars .star .right {
  height: 100%;
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
}

.grade-after-watched .text-editor .words-num-tip {
  font-size: 0.22rem;
  color: #999;
  position: fixed;
  bottom: 0.18rem;
  right: 0.4rem;
}

.grade-after-watched .text-editor .words-num-tip .words-num {
  color: #f03d37;
}

.grade-after-watched .text-editor textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  resize: none;
  outline: none;
  padding: 0.25rem 0.3rem;
  font-size: 0.3rem;
  color: #aaa;
  line-height: 0.48rem;
}

.movie-info {
  padding: 0.42rem 0.32rem;
  color: #fff;
  position: relative;
}

.movie-info .movie-info-top {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
}

.movie-info .crumbs-nav {
  margin-bottom: 0.3rem;
  color: #ccc;
}

.movie-info .movie-cover {
  float: left;
  height: 2.76rem;
  width: 2rem;
  position: relative;
  flex-shrink: 0;
}

.movie-info .movie-cover img.poster {
  height: 2.76rem;
  width: 100%;
}

.movie-info .movie-cover img.poster-play {
  height: 0.6rem;
  width: 0.6rem;
  position: absolute;
  bottom: 0;
  left: 0;
}

.movie-info .movie-desc {
  flex-grow: 1;
  margin-left: 0.24rem;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  overflow: hidden;
}

.movie-info .movie-desc .movie-desc-top {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  flex-grow: 1;
}

.movie-info .movie-desc .movie-other-info {
  display: flex;
  flex-grow: 1;
  flex-flow: column;
  justify-content: center;
}

.movie-info .movie-desc .movie-cn-name {
  font-size: 0.4rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 700;
}

.movie-info .movie-desc .movie-cn-name h1 {
  font-size: 0.4rem;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.movie-info .movie-desc .movieNameMore {
  height: 0.6rem;
  line-height: 35px;
  position: absolute;
  right: 0.32rem;
}

.movie-info .movie-desc .movieNameMore img {
  width: 0.36rem;
  height: 0.36rem;
}

.movie-info .movie-desc .MoreContent {
  margin-right: 0.32rem;
  position: absolute;
  margin-top: 0.6rem;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 1px 3px 0 hsla(0, 0%, 100%, 0.03);
  border-radius: 2px;
  padding: 0.14rem 0.16rem 0.18rem 0.2rem;
  z-index: 9999;
}

.movie-info .movie-desc .MoreContent span {
  display: inline-block;
  font-weight: 500;
  font-family: PingFangSC-Medium;
  font-size: 0.3rem;
  color: #fff;
  letter-spacing: 0;
  line-height: 0.42rem;
  word-break: break-all;
  z-index: 9999;
}

.movie-info .movie-desc .movie-en-name {
  font-size: 0.24rem;
  opacity: 0.6;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.movie-info .movie-desc .movie-type {
  font-size: 0.24rem;
  display: flex;
  align-items: center;
}

.movie-info .movie-desc .movie-type .movie-cat {
  opacity: 0.6;
}

.movie-info .movie-desc .movie-type .movie-tag {
  border-radius: 0.04rem;
  margin-left: 0.08rem;
  vertical-align: text-bottom;
  display: flex;
  align-items: center;
}

.movie-info .movie-desc .movie-type .movie-tag span {
  font-size: 0.18rem;
}

.movie-info .movie-desc .movie-type .movie-tag img {
  height: 0.28rem;
}

.movie-info .movie-desc .actors {
  opacity: 0.6;
  font-size: 0.24rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
}

.movie-info .movie-desc .movie-show-time span {
  opacity: 0.6;
  font-size: 0.24rem;
}

.movie-info .movie-desc .movie-show-time img {
  width: 0.1rem;
  height: 0.18rem;
}

.movie-info .movie-desc .btns {
  display: flex;
  justify-content: space-between;
}

.movie-info .movie-desc .btns .button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: hsla(0, 0%, 100%, 0.35);
  box-shadow: 0 0.02rem 0.08rem 0 rgba(0, 0, 0, 0.1);
  border-radius: 0.08rem;
  font-size: 0.28rem;
  width: 47.61904762%;
  height: 0.6rem;
  color: #fff;
}

.movie-info .movie-desc .btns .button img {
  width: 0.28rem;
  height: 0.28rem;
  margin-right: 0.12rem;
}

.movie-info .movie-desc .btns .button.wanted-to-watch {
  background-color: hsla(0, 0%, 100%, 0.2);
  box-shadow: 0 0.02rem 0.08rem 0 rgba(0, 0, 0, 0.15);
  opacity: 0.3;
  font-size: 0.28rem;
}

.movie-info .my-record-movies {
  background: hsla(0, 0%, 100%, 0.05);
  border-radius: 0.04rem;
  margin-top: 0.2rem;
  font-size: 0.28rem;
  height: 1rem;
  line-height: 1rem;
  opacity: 0.9;
  padding: 0 0.24rem;
}

.movie-info .my-record-movies .record {
  margin-right: 1.8rem;
}

.movie-info .my-record-movies .share {
  float: right;
  width: 1.7rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.movie-info .my-record-movies .share img {
  width: 0.28rem;
  height: 0.28rem;
  margin-right: 0.1rem;
}

.movie-info .separator-line:after {
  background-color: hsla(0, 0%, 100%, 0.1) !important;
}

.write-discussion {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #fff;
  width: 100%;
  height: 100%;
}

.write-discussion header {
  box-sizing: border-box;
  height: 0.9rem;
  background-color: #fdfdfe;
  border-bottom: 0.02rem solid #e8e8e8;
  overflow: hidden;
  text-align: center;
  line-height: 0.88rem;
}

.write-discussion header .title {
  font-size: 0.34rem;
  color: #333;
}

.write-discussion header .cancel {
  font-size: 0.26rem;
  color: #666;
  padding: 0 0.3rem;
  height: 100%;
  float: left;
}

.write-discussion header .publish {
  width: 0.92rem;
  height: 0.5rem;
  border-radius: 0.06rem;
  background-color: #f03d37;
  font-size: 0.26rem;
  color: #fff;
  line-height: 0.5rem;
  margin: 0.19rem 0.3rem 0 0;
  float: right;
}

.write-discussion header .publish.disbled {
  background-color: #d8d8d8;
}

.write-discussion .grade {
  height: 2.44rem;
  box-sizing: border-box;
  border-bottom: 0.02rem solid #e8e8e8;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.write-discussion .grade .score-box {
  font-size: 0.26rem;
  color: #faaf00;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.1;
}

.write-discussion .grade .score-box .score {
  font-size: 0.56rem;
  margin-right: 0.04rem;
}

.write-discussion .grade .tip {
  font-size: 0.24rem;
  color: #aaa;
  text-align: center;
  margin: 0 0 0.14rem;
}

.write-discussion .grade .stars {
  display: flex;
  justify-content: center;
}

.write-discussion .grade .stars .star {
  margin: 0 0.12rem;
  position: relative;
  overflow: hidden;
}

.write-discussion .grade .stars .star img {
  height: 0.6rem;
  width: 0.6rem;
  display: block;
}

.write-discussion .grade .stars .star .left {
  height: 100%;
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.write-discussion .grade .stars .star .right {
  height: 100%;
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
}

.write-discussion .text-editor .words-num-tip {
  font-size: 0.22rem;
  color: #999;
  position: fixed;
  bottom: 0.18rem;
  right: 0.4rem;
}

.write-discussion .text-editor .words-num-tip .words-num {
  color: #f03d37;
}

.write-discussion .text-editor textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  resize: none;
  outline: none;
  padding: 0.25rem 0.3rem;
  font-size: 0.3rem;
  color: #aaa;
  line-height: 0.48rem;
}

.commentstar {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.commentstar .star-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.commentstar .star-wrap .star-img {
  margin-right: 0.04rem;
}

.commentstar .star-wrap .star-score {
  transform: scale(0.92);
}

.commentstar .star-wrap .star-score,
.commentstar .star-wrap .star-word {
  font-size: 0.24rem;
  color: #faaf00;
  font-family: PingFangSC-Regular;
  display: block;
}

.commentstar .star-wrap .star-word {
  transform: scale(0.75);
}

.commentstar-buyticket {
  border: 0.01rem solid #4f89b3;
  border-radius: 0.2rem;
  padding: 0 0.1rem;
  font-family: PingFangSC-Regular;
  color: #4f89b3;
  font-size: 0.24rem;
  text-align: center;
  display: block;
  transform: scale(0.75);
}

.commentstar-buyticket-left {
  margin-left: -0.1rem;
}

.commentstar-pointticket {
  color: #ff5c46;
  border: 0.01rem solid #ff5c46;
}

.discussion {
  background-color: #fff;
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
  overflow: hidden;
  margin-top: -0.24rem;
  position: relative;
}

.discussion > header {
  display: flex;
  justify-content: space-between;
  padding: 0.26rem 0.32rem 0.28rem;
}

.discussion > header .title {
  font-size: 0.3rem;
  color: #333;
}

.discussion > header button {
  background-color: #f03d37;
  box-shadow: 0 0.04rem 0.04rem 0 rgba(255, 211, 211, 0.6);
  border-radius: 0.25rem;
  font-size: 0.22rem;
  color: #fff;
  width: 1.28rem;
  height: 0.5rem;
}

.discussion > .comments .separator-line {
  margin-left: 1.2rem;
}

.discussion > .comments > article {
  padding: 0.3rem;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.discussion > .comments > article.no-padding-top {
  padding-top: 0;
}

.discussion > .comments > article.no-padding-bottom {
  padding-bottom: 0;
}

.discussion > .comments > article .avatar {
  height: 0.68rem;
  width: 0.68rem;
  border-radius: 0.34rem;
}

.discussion > .comments > article > .right {
  margin-left: 0.22rem;
  flex-grow: 1;
}

.discussion > .comments > article > .right > .top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.discussion > .comments > article > .right > .top .title-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.discussion > .comments > article > .right > .top .hierarchy {
  z-index: 9;
}

.discussion > .comments > article > .right > .top .title-appove {
  border-radius: 0.26rem;
  text-align: center;
  height: 0.52rem;
  line-height: 0.52rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0 0.2rem;
}

.discussion > .comments > article > .right > .top .title-appove:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 1.04rem;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  border: 1px solid #ccc;
  border-radius: 0.52rem;
}

.discussion > .comments > article > .right > .top .title-appove .approve-word {
  font-weight: 400;
  font-size: 0.24rem;
  color: #999;
  font-family: PingFangSC-Regular;
  margin-left: 0.11rem;
}

.discussion > .comments > article > .right > .top .title-appove .thumb-up {
  width: 0.32rem;
  height: 0.32rem;
  display: inline-block;
  vertical-align: middle;
}

.discussion > .comments > article > .right > .top .name-box {
  display: flex;
  align-items: center;
}

.discussion > .comments > article > .right > .top .name-box .name {
  font-size: 0.24rem;
  color: #333;
}

.discussion > .comments > article > .right > .top .name-box .level-icon {
  width: 0.72rem;
  height: 0.32rem;
  margin-left: 0.12rem;
}

.discussion > .comments > article > .right > .top .grade-score {
  font-size: 0.22rem;
  color: #999;
}

.discussion > .comments > article > .right > .top .right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.discussion > .comments > article > .right > .top .right button {
  height: 0.4rem;
  width: 0.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.discussion > .comments > article > .right > .top .right button span {
  display: inline-block;
  height: 0.06rem;
  width: 0.06rem;
  background-color: rgba(51, 51, 51, 0.4);
  border-radius: 0.03rem;
  margin: 0 0.02rem;
}

.discussion > .comments > article > .right > .middle {
  margin-top: 0.1rem;
}

.discussion > .comments > article > .right > .middle .comment-content {
  font-size: 0.3rem;
  color: #333;
  line-height: 0.42rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

.discussion > .comments > article > .right > .bottom {
  margin-top: 0.2rem;
  font-size: 0.24rem;
  color: #666;
  display: flex;
  justify-content: space-between;
}

.discussion > .comments > article > .right > .bottom .reply {
  display: inline-block;
  background: #eef1f6;
  border-radius: 0.21rem;
  text-align: center;
  font-size: 0.24rem;
  color: #5a7cab;
  padding: 0.04rem 0.12rem;
  margin-left: 0.16rem;
}

.discussion > .comments > article > .right > .bottom .reply span {
  margin-left: 0.08rem;
}

.discussion > .comments > article > .right > .bottom > .right {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.discussion > .comments > article > .right > .bottom > .right .praise-num {
  margin-left: 0.1rem;
}

.discussion > .comments > article > .right > .bottom > .right .goto-comments {
  margin-left: 0.2rem;
  width: 1.1rem;
  height: 0.56rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/discussion-comment-btn.png);
  background-size: contain;
}

.discussion
  > .comments
  > article
  > .right
  > .bottom
  > .right
  .goto-comments
  .comment-icon {
  margin-right: 0.08rem;
  height: 0.24rem;
  width: 0.24rem;
}

.discussion footer {
  height: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.discussion footer .goto-all-comments {
  font-size: 0.3rem;
  color: #f03d37;
}

.discussion footer .goto-all-comments img {
  width: 0.12rem;
  height: 0.22rem;
  margin-left: 0.08rem;
}

.top-tip-bar {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.9rem;
  background-color: rgba(0, 0, 0, 0.85);
  font-size: 0.26rem;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-tip-bar .l .discussant-num {
  margin-left: 0.32rem;
  margin-right: 0.06rem;
}

.top-tip-bar .r a {
  display: block;
  margin-right: 0.3rem;
  width: 1.42rem;
  height: 0.56rem;
  background-color: #f03d37;
  border-radius: 0.3rem;
  text-align: center;
  line-height: 0.56rem;
}

.questions-and-answers {
  margin-top: 0.24rem;
  background-color: #fff;
}

.questions-and-answers > header {
  font-size: 0.3rem;
  color: #333;
  height: 0.9rem;
  line-height: 0.9rem;
  padding-left: 0.3rem;
}

.questions-and-answers > footer {
  font-size: 0.3rem;
  color: #f03d37;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
}

.questions-and-answers > footer .arrow-right-red {
  width: 0.12rem;
  height: 0.22rem;
  margin-left: 0.08rem;
}

.questions-and-answers .question-answer-list {
  border-top: 0.02rem solid #e8e8e8;
  border-bottom: 0.02rem solid #e8e8e8;
  box-sizing: border-box;
}

.questions-and-answers .question-answer-list .separator-line {
  margin-left: 0.3rem;
}

.questions-and-answers .question-answer-list .question-answer {
  padding: 0.24rem 0.3rem;
}

.questions-and-answers .question-answer-list .question-answer .question {
  font-size: 0.34rem;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  font-weight: 700;
}

.questions-and-answers .question-answer-list .question-answer .answer-num {
  margin-top: 0.04rem;
  font-size: 0.24rem;
  color: #666;
}

.questions-and-answers .question-answer-list .question-answer .answer {
  margin-top: 0.24rem;
  font-size: 0.26rem;
  color: #666;
  letter-spacing: 0;
  line-height: 0.38rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

.long-comments {
  margin-top: 0.24rem;
  background-color: #fff;
}

.long-comments > header {
  display: flex;
  justify-content: space-between;
  padding: 0.26rem 0.32rem 0.28rem;
}

.long-comments > header .title {
  font-size: 0.3rem;
  color: #333;
}

.long-comments > header button {
  background-color: #f03d37;
  box-shadow: 0 0.04rem 0.04rem 0 rgba(255, 211, 211, 0.6);
  border-radius: 0.25rem;
  font-size: 0.22rem;
  color: #fff;
  width: 1.28rem;
  height: 0.5rem;
}

.long-comments > .comments .separator-line {
  margin-left: 1.2rem;
}

.long-comments > .comments > article {
  padding: 0.24rem 0.3rem;
}

.long-comments > .comments > article.no-padding-top {
  padding-top: 0;
}

.long-comments > .comments > article .avatar {
  height: 0.68rem;
  width: 0.68rem;
  border-radius: 0.34rem;
}

.long-comments > .comments > article .comment-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.long-comments > .comments > article .comment-wrap > .right {
  margin-left: 0.22rem;
}

.long-comments > .comments > article .comment-wrap > .right > .top {
  display: flex;
  justify-content: space-between;
}

.long-comments > .comments > article .comment-wrap > .right > .top .name-box {
  display: flex;
  align-items: center;
}

.long-comments
  > .comments
  > article
  .comment-wrap
  > .right
  > .top
  .name-box
  .name {
  font-size: 0.24rem;
  color: #333;
}

.long-comments
  > .comments
  > article
  .comment-wrap
  > .right
  > .top
  .name-box
  .level-icon {
  width: 0.72rem;
  height: 0.32rem;
  margin-left: 0.12rem;
}

.long-comments
  > .comments
  > article
  .comment-wrap
  > .right
  > .top
  .name-box
  .buy-ticket {
  margin-left: 0.12rem;
  border: 0.02rem solid #a3c6df;
  border-radius: 0.15rem;
  height: 0.26rem;
  font-size: 0.18rem;
  color: #4f89b3;
  line-height: 0.28rem;
  text-align: center;
}

.long-comments
  > .comments
  > article
  .comment-wrap
  > .right
  > .top
  .grade-score {
  font-size: 0.22rem;
  color: #999;
}

.long-comments > .comments > article .comment-wrap > .right > .top .right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.long-comments
  > .comments
  > article
  .comment-wrap
  > .right
  > .top
  .right
  button {
  height: 0.4rem;
  width: 0.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.long-comments
  > .comments
  > article
  .comment-wrap
  > .right
  > .top
  .right
  button
  span {
  display: inline-block;
  height: 0.06rem;
  width: 0.06rem;
  background-color: rgba(51, 51, 51, 0.4);
  border-radius: 0.03rem;
  margin: 0 0.02rem;
}

.long-comments > .comments > article .comment-wrap > .right > .middle {
  margin-top: 0.1rem;
}

.long-comments
  > .comments
  > article
  .comment-wrap
  > .right
  > .middle
  .comment-title {
  font-size: 0.3rem;
  color: #333;
}

.long-comments
  > .comments
  > article
  .comment-wrap
  > .right
  > .middle
  .comment-content,
.long-comments
  > .comments
  > article
  .comment-wrap
  > .right
  > .middle
  .comment-title {
  line-height: 0.42rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

.long-comments
  > .comments
  > article
  .comment-wrap
  > .right
  > .middle
  .comment-content {
  font-size: 0.26rem;
  color: #666;
}

.long-comments > .comments > article .comment-wrap > .right > .bottom {
  margin-top: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.24rem;
  color: #999;
}

.long-comments > .comments > article .comment-wrap > .right > .bottom > .right {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.long-comments
  > .comments
  > article
  .comment-wrap
  > .right
  > .bottom
  > .right
  .praise-num {
  margin-left: 0.1rem;
}

.long-comments
  > .comments
  > article
  .comment-wrap
  > .right
  > .bottom
  > .right
  .goto-comments {
  margin-left: 0.2rem;
  width: 1.1rem;
  border-radius: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.long-comments
  > .comments
  > article
  .comment-wrap
  > .right
  > .bottom
  > .right
  .goto-comments
  .comment-icon {
  margin-right: 0.08rem;
}

.long-comments footer {
  height: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.long-comments footer .goto-all-comments {
  font-size: 0.3rem;
  color: #f03d37;
}

.long-comments footer .goto-all-comments img {
  width: 0.12rem;
  height: 0.22rem;
  margin-left: 0.08rem;
}

.film-data {
  margin-top: 0.24rem;
  background-color: #fff;
}

.film-data .title {
  height: 0.9rem;
  font-size: 0.3rem;
  color: #333;
  line-height: 0.9rem;
  padding: 0 0 0 0.3rem;
}

.film-data .data {
  overflow: hidden;
}

.film-data .data .attr-value {
  float: left;
  box-sizing: border-box;
  width: 50%;
  height: 1.4rem;
  padding: 0.3rem 0.3rem 0.3rem 0.4rem;
}

.film-data .data .attr-value .attr-wrap-link {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.film-data .data .attr-value img {
  height: 0.28rem;
  width: 0.28rem;
  margin-top: 0.09rem;
  flex-shrink: 0;
}

.film-data .data .attr-value .right {
  overflow: hidden;
  margin-left: 0.12rem;
}

.film-data .data .attr-value .attr {
  font-size: 0.3rem;
  color: #333;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.film-data .data .attr-value .value {
  font-size: 0.26rem;
  color: #666;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.film-music {
  background-color: #fff;
  margin-top: 0.24rem;
}

.film-music header {
  height: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.29rem 0 0.3rem;
  font-size: 0.3rem;
  color: #333;
}

.film-music header .right {
  font-size: 0.26rem;
  color: #666;
}

.film-music header .right img {
  margin-left: 0.09rem;
}

.film-music .music-box {
  padding: 0 0.3rem 0.3rem;
}

.film-music .music-box .music-box-inner-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.film-music .music-box .music-box-inner-wrap .music-icon-box img {
  display: block;
  height: 1.4rem;
}

.film-music .music-box .music-box-inner-wrap .music-info {
  padding-left: 0.2rem;
  height: 1.4rem;
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}

.film-music .music-box .music-box-inner-wrap .music-info:after {
  box-sizing: border-box;
  content: "";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 1px;
  transform: scale(0.5);
  transform-origin: top left;
}

.film-music .music-box .music-box-inner-wrap .music-info .name {
  font-size: 0.3rem;
  color: #333;
  margin-top: 0.24rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.film-music .music-box .music-box-inner-wrap .music-info .author {
  font-size: 0.26rem;
  color: #999;
  margin-top: 0.06rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.store-bill {
  background-color: #fff;
  margin-top: 0.24rem;
}

.store-bill header {
  height: 0.9rem;
  padding: 0 0.29rem 0 0.3rem;
  font-size: 0.3rem;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.store-bill header .right {
  font-size: 0.26rem;
  color: #666;
}

.store-bill header .right > a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.store-bill header .right img {
  margin-left: 0.09rem;
}

.store-bill .store-box {
  padding-left: 0.2rem;
  padding-bottom: 0.28rem;
}

.store-bill .store-box ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow-x: scroll;
  overflow-y: hidden;
}

.store-bill .store-box ul li {
  display: block;
  box-sizing: border-box;
  width: 2.1rem;
  flex-shrink: 0;
  margin: 0 0.1rem;
  text-align: center;
}

.store-bill .store-box ul li img {
  border: 0.02rem solid rgba(43, 43, 43, 0.1);
  display: block;
  box-sizing: border-box;
  width: 2.1rem;
  height: 2.1rem;
}

.store-bill .store-box ul li .name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.26rem;
  color: #333;
  margin-top: 0.14rem;
}

.store-bill .store-box ul li .prices {
  font-size: 0.2rem;
  color: #999;
  margin-top: 0.02rem;
}

.store-bill .store-box ul li .prices .price {
  font-size: 0.32rem;
  color: #f03d37;
}

.store-bill .store-box ul li .prices .price-unit {
  color: #f03d37;
  margin-right: 0.08rem;
}

.store-bill .store-box.less li {
  width: 100%;
}

.store-bill .store-box.less li a {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}

.store-bill .store-box.less li a img {
  border: none;
}

.store-bill .store-box.less li a .detail-info {
  margin-left: 0.3rem;
  display: flex;
  flex-flow: column;
  text-align: left;
}

.store-bill .store-box.less li a .detail-info .name {
  font-size: 0.32rem;
  margin-top: 0.32rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.store-bill .store-box.less li a .detail-info .prices {
  margin-top: 0.12rem;
  font-size: 0.2rem;
}

.store-bill .store-box.less li a .detail-info .prices .price {
  font-size: 0.4rem;
}

.store-bill .store-box.less li a .detail-info .prices .price-unit {
  font-size: 0.3rem;
}

.box-office {
  margin-top: 0.24rem;
  background-color: #fff;
  overflow: hidden;
}

.box-office header {
  height: 0.86rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3rem;
}

.box-office header .title {
  font-size: 0.3rem;
  color: #333;
}

.box-office header .goto-detail {
  font-size: 0.24rem;
  color: #999;
}

.box-office header .goto-detail img {
  width: 0.1rem;
  height: 0.16rem;
  margin-left: 0.16rem;
}

.box-office .data-box {
  background-color: #f8f8f8;
  border-radius: 0.12rem;
  margin: 0 0.3rem 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-office .data-box .item {
  flex-grow: 1;
  text-align: center;
  padding: 0.24rem 0 0.22rem;
}

.box-office .data-box .item .value {
  font-size: 0.34rem;
  color: #f03d37;
}

.box-office .data-box .item .name {
  font-size: 0.24rem;
  color: #666;
  margin-top: 0.02rem;
}

.related-informations {
  margin-top: 0.24rem;
  background-color: #fff;
  overflow: hidden;
}

.related-informations header {
  height: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3rem;
}

.related-informations header .title {
  font-size: 0.3rem;
  color: #333;
}

.related-informations header .goto-all {
  font-size: 0.26rem;
  color: #666;
  height: 100%;
  width: 0.84rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.related-informations header .goto-all img {
  width: 0.12rem;
  height: 0.22rem;
  margin-left: 0.08rem;
}

.related-informations .informations {
  padding: 0 0.3rem;
}

.related-informations .informations .separator-line {
  height: 0.02rem;
  background-color: #e8e8e8;
  margin: 0.3rem 0;
}

.related-informations .informations .information {
  padding: 0.3rem 0;
}

.related-informations .informations .information .top {
  overflow: hidden;
}

.related-informations .informations .information .top .title {
  font-size: 0.34rem;
  color: #333;
  line-height: 0.48rem;
  margin-right: 2.3rem;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

.related-informations .informations .information .top img {
  width: 2.2rem;
  height: 1.56rem;
  border-radius: 0.04rem;
  float: right;
}

.related-informations .informations .information .top.no-img .title {
  margin-right: 0;
}

.related-informations .informations .information .bottom {
  margin-top: 0.16rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.24rem;
  color: #999;
}

.related-informations .informations .information .bottom .author {
  margin-right: 0.14rem;
}

.related-informations .informations .information .bottom .right {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.related-informations .informations .information .bottom .right .read-icon {
  margin-right: 0.08rem;
}

.related-informations .informations .information .bottom .right .comment-icon {
  margin: 0 0.1rem 0 0.8rem;
}

.related-movies {
  margin-top: 0.16rem;
  background-color: #fff;
}

.related-movies header {
  height: 0.9rem;
  padding-left: 0.3rem;
  font-size: 0.3rem;
  line-height: 0.9rem;
  color: #333;
}

.related-movies .movies ul {
  display: flex;
  justify-content: flex-start;
  padding: 0 0.26rem;
  overflow-x: scroll;
}

.related-movies .movies li {
  flex-shrink: 0;
  padding: 0 0.08rem 0.3rem 0;
}

.related-movies .movies li a {
  display: block;
}

.related-movies .movies li .img-box {
  position: relative;
  width: 1.92rem;
  height: 2.68rem;
  border-radius: 0.04rem;
  overflow: hidden;
}

.related-movies .movies li .img-box img {
  display: block;
  width: 100%;
  height: 100%;
}

.related-movies .movies li .img-box .img-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-180deg, rgba(29, 29, 29, 0) 68%, #1d1d1d);
}

.related-movies .movies li .img-box .grade {
  position: absolute;
  top: 2.28rem;
  left: 0.12rem;
  font-size: 0.22rem;
  color: #faaf00;
}

.related-movies .movies li .name {
  display: block;
  width: 1.92rem;
  font-size: 0.3rem;
  color: #333;
  margin-top: 0.14rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.header-nav-wrapper {
  padding: 0.12rem;
  height: 0.76rem;
  position: relative;
  z-index: 100;
  background: #e54847;
}

.header-nav-wrapper .nav {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.header-nav-wrapper .nav-title {
  flex: 1;
  color: #fff;
  font-size: 0.36rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-nav-wrapper .nav-back:after {
  content: "";
  top: 0.32rem;
  left: 0.24rem;
  width: 0.26rem;
  height: 0.26rem;
  position: absolute;
  border: 0.04rem solid #fff;
  border-width: 0 0 0.04rem 0.04rem;
  transform: rotate(45deg);
}

.abchina-header-nav {
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  font-weight: 800;
}

.abchina-header-nav .nav-back:after {
  content: "";
  top: 0.3rem;
  left: 0.24rem;
  width: 0.24rem;
  height: 0.24rem;
  position: absolute;
  border: 0.04rem solid #fff;
  border-width: 0 0 0.04rem 0.04rem;
  transform: rotate(45deg);
}

.disclaimer {
  margin-top: 0.8rem;
  text-align: center;
}

.disclaimer .content {
  font-size: 0.22rem;
  line-height: 0.32rem;
  color: #999;
}

.disclaimer .content a {
  color: #4e759e;
}

.bottom-logo {
  height: 0.98rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.2rem;
  margin-top: -0.09rem;
}

.bottom-logo.iphone-x {
  margin-bottom: 1.56rem;
}

.bottom-logo img {
  height: 0.44rem;
}

.noneBottom {
  margin-bottom: 0;
}

html {
  font-size: 50px;
}

@media (min-width: 414px) {
  html {
    font-size: 51.5px;
  }
}

@media (max-width: 375px) {
  html {
    font-size: 50px;
  }
}

@media (max-width: 360px) {
  html {
    font-size: 45px;
  }
}

@media (max-width: 320px) {
  html {
    font-size: 42px;
  }
}

body {
  user-select: none;
  -webkit-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-overflow-scrolling: touch;
  width: 100%;
  overflow-x: hidden;
  background: #f4f4f4;
  font: 14px/1.5 Arial, Helvetica, sans-serif;
}

body input,
body textarea {
  appearance: none;
}

.movie-page button {
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
  background-color: transparent;
}

.movie-page a {
  text-decoration: none;
  color: inherit;
}

.movie-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.movie-page p {
  margin: 0;
}

.movie-page ::-webkit-scrollbar {
  height: 0;
  width: 0;
}

.movie-page .separator-line {
  position: relative;
  border-bottom: none;
}

.movie-page .separator-line:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background: #e8e8e8;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

.movie-page .one-px-border-bottom {
  position: relative;
  border-bottom: none;
}

.movie-page .one-px-border-bottom:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background: #e8e8e8;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

.movie-page .one-px-border-top {
  position: relative;
  border-top: none;
}

.movie-page .one-px-border-top:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #e8e8e8;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

.movie-page .one-px-border-right {
  position: relative;
  border-right: none;
}

.movie-page .one-px-border-right:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background: #e8e8e8;
  width: 1px;
  height: 100%;
  transform: scaleX(0.5);
  transform-origin: 0 0;
}

.movie-page .one-px-border-left {
  position: relative;
  border-left: none;
}

.movie-page .one-px-border-left:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #e8e8e8;
  width: 1px;
  height: 100%;
  transform: scaleX(0.5);
  transform-origin: 0 0;
}
.crumbs-nav a,
.actors a {
  display: inline;
}

</style>